import React from 'react';
import { Card, Descriptions, Tag, Space, Alert, Divider } from 'antd';
import { 
  UserOutlined, 
  CrownOutlined, 
  SafetyOutlined, 
  TeamOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined
} from '@ant-design/icons';
import { useModel, useAccess } from '@umijs/max';

const PermissionDebugger: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const access = useAccess();

  const currentUser = initialState?.currentUser;
  const userPermissions = initialState?.userPermissions || [];
  const userGroups = initialState?.userGroups || [];

  if (!currentUser) {
    return (
      <Alert
        message="未登录"
        description="请先登录系统"
        type="warning"
        showIcon
      />
    );
  }

  const renderPermissionStatus = (hasPermission: boolean, label: string) => (
    <Tag 
      icon={hasPermission ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
      color={hasPermission ? 'success' : 'error'}
    >
      {label}
    </Tag>
  );

  return (
    <Card title="权限调试信息" style={{ margin: '16px 0' }}>
      {/* 用户基本信息 */}
      <Descriptions title="用户信息" column={2} bordered>
        <Descriptions.Item label="用户名" span={1}>
          <Space>
            <UserOutlined />
            {currentUser.username}
          </Space>
        </Descriptions.Item>
        <Descriptions.Item label="用户ID" span={1}>
          {currentUser.id}
        </Descriptions.Item>
        <Descriptions.Item label="邮箱" span={1}>
          {currentUser.email}
        </Descriptions.Item>
        <Descriptions.Item label="姓名" span={1}>
          {currentUser.first_name} {currentUser.last_name}
        </Descriptions.Item>
        <Descriptions.Item label="用户状态" span={2}>
          <Space>
            {currentUser.is_superuser && (
              <Tag icon={<CrownOutlined />} color="purple">超级用户</Tag>
            )}
            {currentUser.is_staff && (
              <Tag icon={<SafetyOutlined />} color="blue">员工</Tag>
            )}
            <Tag color={currentUser.is_active ? 'green' : 'red'}>
              {currentUser.is_active ? '激活' : '禁用'}
            </Tag>
          </Space>
        </Descriptions.Item>
      </Descriptions>

      <Divider />

      {/* 权限状态 */}
      <Descriptions title="权限状态" column={1} bordered>
        <Descriptions.Item label="超级用户权限">
          {currentUser.is_superuser ? (
            <Alert
              message="🎉 超级用户拥有所有权限"
              description="作为超级用户，您可以访问系统的所有功能，无需额外的权限检查。"
              type="success"
              showIcon
              style={{ margin: '8px 0' }}
            />
          ) : (
            <Alert
              message="普通用户"
              description="需要通过权限和组来控制访问权限。"
              type="info"
              showIcon
              style={{ margin: '8px 0' }}
            />
          )}
        </Descriptions.Item>
        
        <Descriptions.Item label="基础权限">
          <Space wrap>
            {renderPermissionStatus(access.isAuthenticated, '已认证')}
            {renderPermissionStatus(access.canSeeAdmin, '管理后台')}
          </Space>
        </Descriptions.Item>

        <Descriptions.Item label="用户管理权限">
          <Space wrap>
            {renderPermissionStatus(access.canViewUsers, '查看用户')}
            {renderPermissionStatus(access.canCreateUser, '创建用户')}
            {renderPermissionStatus(access.canUpdateUser, '更新用户')}
            {renderPermissionStatus(access.canDeleteUser, '删除用户')}
          </Space>
        </Descriptions.Item>

        <Descriptions.Item label="组管理权限">
          <Space wrap>
            {renderPermissionStatus(access.canViewGroups, '查看组')}
            {renderPermissionStatus(access.canCreateGroup, '创建组')}
            {renderPermissionStatus(access.canUpdateGroup, '更新组')}
            {renderPermissionStatus(access.canDeleteGroup, '删除组')}
          </Space>
        </Descriptions.Item>

        <Descriptions.Item label="权限管理">
          <Space wrap>
            {renderPermissionStatus(access.canViewPermissions, '查看权限')}
          </Space>
        </Descriptions.Item>

        <Descriptions.Item label="系统管理">
          <Space wrap>
            {renderPermissionStatus(access.canViewSystem, '系统管理')}
          </Space>
        </Descriptions.Item>
      </Descriptions>

      <Divider />

      {/* 详细权限列表 */}
      <Descriptions title="详细权限信息" column={1} bordered>
        <Descriptions.Item label="用户权限列表">
          {userPermissions.length > 0 ? (
            <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
              <Space wrap>
                {userPermissions.map((permission, index) => (
                  <Tag key={index} color="blue">{permission}</Tag>
                ))}
              </Space>
            </div>
          ) : (
            <Tag color="default">无直接权限</Tag>
          )}
        </Descriptions.Item>

        <Descriptions.Item label="用户组列表">
          {userGroups.length > 0 ? (
            <Space wrap>
              {userGroups.map((group, index) => (
                <Tag key={index} icon={<TeamOutlined />} color="green">{group}</Tag>
              ))}
            </Space>
          ) : (
            <Tag color="default">未加入任何组</Tag>
          )}
        </Descriptions.Item>
      </Descriptions>

      {/* 权限检查说明 */}
      <Alert
        message="权限检查逻辑说明"
        description={
          <div>
            <p><strong>超级用户 (is_superuser=true):</strong></p>
            <ul>
              <li>✅ 自动拥有所有权限，无需额外检查</li>
              <li>✅ 可以访问所有页面和功能</li>
              <li>✅ 默认属于所有组</li>
            </ul>
            
            <p><strong>普通用户:</strong></p>
            <ul>
              <li>🔍 需要检查具体的权限 (userPermissions)</li>
              <li>🔍 需要检查所属组 (userGroups)</li>
              <li>🔍 员工用户 (is_staff=true) 可以访问管理后台</li>
            </ul>

            <p><strong>权限格式:</strong></p>
            <ul>
              <li>Django格式: <code>app_label.action_model</code> (如: auth.view_user)</li>
              <li>组名格式: 直接使用组名 (如: administrators, managers)</li>
            </ul>
          </div>
        }
        type="info"
        showIcon
        style={{ marginTop: '16px' }}
      />
    </Card>
  );
};

export default PermissionDebugger;
